<template>
  <div class="dashboard-container">
    <!-- 主内容区域 -->
    <div class="right-panel">
      <!-- 增强的统计卡片 -->
      <EnhancedStatsCards />
      
      <!-- 增强的趋势分析 -->
      <div class="trend-analysis-section">
        <EnhancedTrendAnalysis />
      </div>
      
      <!-- 团队绩效（仅管理员和团队领导可见） -->
      
    </div>

    <!-- 工单提交面板 -->
    <el-dialog v-model="ticketSubmitDialog.visible" title="新建工单" width="600px">
      <el-form :model="ticketForm" :rules="ticketRules" ref="ticketFormRef" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="ticketForm.title" placeholder="简要描述问题" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input 
            v-model="ticketForm.description" 
            type="textarea" 
            :rows="4"
            placeholder="详细描述遇到的问题"
          />
        </el-form-item>
        <el-form-item label="优先级" prop="priority">
          <el-select v-model="ticketForm.priority" placeholder="请选择优先级">
            <el-option label="低" value="LOW" />
            <el-option label="中" value="MEDIUM" />
            <el-option label="高" value="HIGH" />
            <el-option label="紧急" value="URGENT" />
          </el-select>
        </el-form-item>
        <el-form-item label="分类" prop="categoryId">
          <el-select v-model="ticketForm.categoryId" placeholder="请选择问题分类">
            <el-option label="技术问题" :value="1" />
            <el-option label="功能问题" :value="2" />
            <el-option label="性能问题" :value="3" />
            <el-option label="其他" :value="4" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="ticketSubmitDialog.visible = false">取消</el-button>
        <el-button type="primary" :loading="submitting" @click="submitTicket">提交</el-button>
      </template>
    </el-dialog>

    <!-- 状态更新对话框 -->
    <el-dialog v-model="statusDialog.visible" title="更新工单状态" width="500px">
      <el-form :model="statusForm" label-width="80px">
        <el-form-item label="新状态">
          <el-select v-model="statusForm.status" placeholder="请选择状态">
            <el-option label="待处理" value="pending" />
            <el-option label="处理中" value="in_progress" />
            <el-option label="已解决" value="resolved" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input 
            v-model="statusForm.note" 
            type="textarea" 
            :rows="3"
            placeholder="请输入处理备注（可选）"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="statusDialog.visible = false">取消</el-button>
        <el-button type="primary" :loading="updating" @click="updateStatus">确定</el-button>
      </template>
    </el-dialog>

    <!-- 指派对话框 -->
    <el-dialog v-model="assignDialog.visible" title="指派工单" width="400px">
      <el-form label-width="80px">
        <el-form-item label="指派给">
          <el-select v-model="assignDialog.agentId" placeholder="选择技术人员">
            <el-option 
              v-for="agent in agents" 
              :key="agent.id" 
              :label="agent.name" 
              :value="agent.id" 
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="assignDialog.visible = false">取消</el-button>
        <el-button type="primary" :loading="assigning" @click="confirmAssign">确认</el-button>
      </template>
    </el-dialog>

    <!-- 添加用户对话框 -->
    <el-dialog
      v-model="addUserDialog.visible"
      title="添加用户"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="addUserFormRef"
        :model="addUserForm"
        :rules="addUserRules"
        label-width="80px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addUserForm.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="addUserForm.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addUserForm.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input 
            v-model="addUserForm.password" 
            type="password" 
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="addUserForm.role" placeholder="请选择角色" style="width: 100%">
            <el-option label="管理员" value="admin" />
            <el-option label="客服" value="agent" />
            <el-option label="客户" value="customer" />
            <el-option label="经理" value="manager" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="addUserForm.status" placeholder="请选择状态" style="width: 100%">
            <el-option label="激活" value="active" />
            <el-option label="禁用" value="inactive" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addUserDialog.visible = false">取消</el-button>
        <el-button type="primary" :loading="addingUser" @click="confirmAddUser">确认</el-button>
      </template>
    </el-dialog>

    <!-- 编辑权限对话框 -->
    <el-dialog
      v-model="permissionDialog.visible"
      title="编辑用户权限"
      width="600px"
      :close-on-click-modal="false"
    >
      <div v-if="selectedUserForPermission" class="permission-content">
        <div class="user-info">
          <el-icon class="user-icon"><User /></el-icon>
          <div class="user-details">
            <div class="user-name">{{ selectedUserForPermission.name }}</div>
            <div class="user-role">{{ translateRole(selectedUserForPermission.role) }}</div>
          </div>
        </div>
        
        <el-divider />
        
        <div class="permission-sections">
          <div class="permission-section">
            <h4>工单权限</h4>
            <el-checkbox-group v-model="permissionForm.permissions">
              <el-checkbox value="ticket:read">查看工单</el-checkbox>
              <el-checkbox value="ticket:create">创建工单</el-checkbox>
              <el-checkbox value="ticket:update">更新工单</el-checkbox>
              <el-checkbox value="ticket:delete">删除工单</el-checkbox>
              <el-checkbox value="ticket:assign">指派工单</el-checkbox>
            </el-checkbox-group>
          </div>
          
          <div class="permission-section">
            <h4>用户管理权限</h4>
            <el-checkbox-group v-model="permissionForm.permissions">
              <el-checkbox value="user:manage">用户管理</el-checkbox>
            </el-checkbox-group>
          </div>
          
          <div class="permission-section">
            <h4>系统权限</h4>
            <el-checkbox-group v-model="permissionForm.permissions">
              <el-checkbox value="system:config">系统配置</el-checkbox>
              <el-checkbox value="report:view">报表查看</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="permissionDialog.visible = false">取消</el-button>
        <el-button type="primary" :loading="updatingPermissions" @click="confirmUpdatePermissions">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed, onMounted, reactive, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useTicketsStore } from '../store/tickets'
import { useAuthStore, PERMISSIONS } from '../store/auth'
import { useUserStore } from '../store/user'
import { UserService } from '../services/users'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Document, Clock, Check, Timer, TrendCharts, Lightning, 
  Plus, List, User, DataAnalysis, PieChart, Close, Search, Edit, ArrowDown, Refresh
} from '@element-plus/icons-vue'
import EnhancedStatsCards from '../components/EnhancedStatsCards.vue'
import EnhancedTrendAnalysis from '../components/EnhancedTrendAnalysis.vue'
import { useRealtimeData } from '../services/realtimeDataService'

export default {
  name: 'Dashboard',
  components: {
    EnhancedStatsCards,
    EnhancedTrendAnalysis
  },
  setup() {
    const router = useRouter()
    const ticketsStore = useTicketsStore()
    const authStore = useAuthStore()
    const userStore = useUserStore()
    const realtimeData = useRealtimeData()
    
    // 基础状态
    const chartPeriod = ref('7d')
    const agents = ref([])
    
    // 面板显示状态
    const showTicketPanel = ref(false)
    const showUserPanel = ref(false)
    const showAnalyticsPanel = ref(false)
    
    // 工单相关状态
    const selectedTicket = ref(null)
    const ticketSearchKeyword = ref('')
    const submitting = ref(false)
    const updating = ref(false)
    const assigning = ref(false)
    const addingUser = ref(false)
    const updatingPermissions = ref(false)
    
    // 对话框状态
    const ticketSubmitDialog = ref({ visible: false })
    const statusDialog = ref({ visible: false })
    const assignDialog = ref({ visible: false, agentId: null })
    const addUserDialog = ref({ visible: false })
    const permissionDialog = ref({ visible: false })
    
    // 表单数据
    const ticketForm = reactive({
      title: '',
      description: '',
      priority: 'MEDIUM',  // 使用大写格式
      categoryId: null     // 使用categoryId而不是category
    })
    
    const statusForm = reactive({
      status: '',
      note: ''
    })
    
    const addUserForm = reactive({
      username: '',
      name: '',
      email: '',
      password: '',
      role: 'agent',
      status: 'active'
    })
    
    const permissionForm = reactive({
      permissions: []
    })
    
    const selectedUserForPermission = ref(null)
    
    const ticketRules = {
      title: [
        { required: true, message: '请输入工单标题', trigger: 'blur' }
      ],
      description: [
        { required: true, message: '请输入问题描述', trigger: 'blur' }
      ],
      priority: [
        { required: true, message: '请选择优先级', trigger: 'change' }
      ],
      category: [
        { required: true, message: '请选择问题分类', trigger: 'change' }
      ]
    }
    
    const addUserRules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 20, message: '用户名长度在3到20个字符', trigger: 'blur' }
      ],
      name: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' }
      ],
      role: [
        { required: true, message: '请选择角色', trigger: 'change' }
      ],
      status: [
        { required: true, message: '请选择状态', trigger: 'change' }
      ]
    }

    const stats = computed(() => ({
      totalTickets: ticketsStore.tickets.length,
      pendingTickets: ticketsStore.tickets.filter(t => t.status === 'OPEN' || t.status === 'pending').length,
      resolvedTickets: ticketsStore.tickets.filter(t => t.status === 'RESOLVED' || t.status === 'resolved').length,
      inProgressTickets: ticketsStore.tickets.filter(t => t.status === 'IN_PROGRESS' || t.status === 'in_progress').length
    }))

    const slaRate = computed(() => {
      const total = stats.value.totalTickets
      const resolved = stats.value.resolvedTickets
      return total > 0 ? Math.round((resolved / total) * 100) : 0
    })

    const filteredTickets = computed(() => {
      const keyword = ticketSearchKeyword.value.toLowerCase()
      return ticketsStore.tickets.filter(t => 
        !keyword || t.title.toLowerCase().includes(keyword)
      )
    })

    // 面板控制方法
    const showTicketSubmit = () => {
      ticketSubmitDialog.value.visible = true
    }

    const showTicketList = () => {
      showTicketPanel.value = true
      showUserPanel.value = false
      showAnalyticsPanel.value = false
    }

    const showUserManagement = () => {
      showUserPanel.value = true
      showTicketPanel.value = false
      showAnalyticsPanel.value = false
    }

    const showAnalytics = () => {
      showAnalyticsPanel.value = true
      showTicketPanel.value = false
      showUserPanel.value = false
    }

    const closeTicketPanel = () => {
      showTicketPanel.value = false
      selectedTicket.value = null
    }

    const closeUserPanel = () => {
      showUserPanel.value = false
    }

    const closeAnalyticsPanel = () => {
      showAnalyticsPanel.value = false
    }

    // 工单相关方法
    const selectTicket = (ticket) => {
      selectedTicket.value = ticket
    }

    const handleTicketSearch = () => {
      // 搜索逻辑已在computed中处理
    }

    const submitTicket = async () => {
      try {
        submitting.value = true
        console.log('[Dashboard] 开始创建工单...')
        
        const result = await ticketsStore.createTicket(ticketForm)
        
        console.log('[Dashboard] 创建工单结果:', result)
        
        if (result && result.success) {
          // 🎉 创建成功
          const ticketData = result.data
          
          // 显示成功消息（包含工单编号）
          ElMessage({
            message: `🎉 工单创建成功！工单编号：${ticketData.ticketNumber || ticketData.id}`,
            type: 'success',
            duration: 5000,
            showClose: true,
            customClass: 'ticket-success-message'
          })
          
          console.log(`[Dashboard] ✅ 工单创建成功: ${ticketData.ticketNumber}`)
          
          // 关闭对话框
          ticketSubmitDialog.value.visible = false
          
          // 重置表单
          Object.assign(ticketForm, {
            title: '',
            description: '',
            priority: 'MEDIUM',
            categoryId: null
          })
          
          // 🚀 确保实时更新：强制触发响应式更新
          console.log('[Dashboard] 🔄 触发实时更新...')
          
          // 验证新工单是否已添加到列表中
          setTimeout(() => {
            const newTicket = ticketsStore.tickets.find(t => t.id === ticketData.id)
            if (newTicket) {
              console.log('[Dashboard] ✅ 新工单已实时显示在列表中:', newTicket.title)
            } else {
              console.warn('[Dashboard] ⚠️ 新工单未在列表中，可能需要手动刷新')
            }
          }, 100)
          
          console.log('[Dashboard] 工单已添加到列表')
        } else {
          // 创建失败
          const errorMsg = result?.message || '创建工单失败，请重试'
          console.error('[Dashboard] ❌ 创建工单失败:', errorMsg)
          ElMessage({
            message: errorMsg,
            type: 'error',
            duration: 5000,
            showClose: true
          })
        }
      } catch (error) {
        console.error('[Dashboard] ❌ 创建工单异常:', error)
        ElMessage({
          message: `创建工单失败：${error.message || '未知错误'}`,
          type: 'error',
          duration: 5000,
          showClose: true
        })
      } finally {
        submitting.value = false
        console.log('[Dashboard] 工单创建流程结束')
      }
    }

    const updateTicketStatus = () => {
      if (!selectedTicket.value) return
      statusForm.status = selectedTicket.value.status
      statusForm.note = ''
      statusDialog.value.visible = true
    }

    const updateStatus = async () => {
      if (!selectedTicket.value || !statusForm.status) {
        ElMessage.warning('请选择要更新的状态')
        return
      }

      try {
        await ElMessageBox.confirm(
          `确定要将工单状态更新为"${translateStatus(statusForm.status)}"吗？`,
          '确认更新',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )

        updating.value = true
        await ticketsStore.updateTicketStatus(selectedTicket.value.id, statusForm.status, statusForm.note)
        ElMessage.success('状态更新成功！')
        
        // 更新选中的工单数据
        const updatedTicket = ticketsStore.tickets.find(t => t.id === selectedTicket.value.id)
        if (updatedTicket) {
          selectedTicket.value = updatedTicket
        }
        
        statusDialog.value.visible = false
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('状态更新失败：' + (error.message || '未知错误'))
        }
      } finally {
        updating.value = false
      }
    }

    const assignTicket = () => {
      if (!selectedTicket.value) return
      assignDialog.value.visible = true
      assignDialog.value.agentId = selectedTicket.value.assigneeId || null
    }

    const confirmAssign = async () => {
      const agent = agents.value.find(a => a.id === assignDialog.value.agentId)
      if (!selectedTicket.value || !agent) {
        ElMessage.warning('请选择要指派的技术人员')
        return
      }
      try {
        assigning.value = true
        await ticketsStore.assignTicket(selectedTicket.value.id, agent)
        ElMessage.success('指派成功')
        
        // 更新选中的工单数据
        const updatedTicket = ticketsStore.tickets.find(t => t.id === selectedTicket.value.id)
        if (updatedTicket) {
          selectedTicket.value = updatedTicket
        }
        
        assignDialog.value.visible = false
      } catch (error) {
        ElMessage.error('指派失败：' + (error.message || '未知错误'))
      } finally {
        assigning.value = false
      }
    }

    const getUserTicketCount = (agentId) => {
      return ticketsStore.tickets.filter(t => t.assigneeId === agentId).length
    }

    // 用户管理方法
    const showAddUserDialog = () => {
      addUserDialog.value.visible = true
      // 重置表单
      Object.assign(addUserForm, {
        username: '',
        name: '',
        email: '',
        password: '',
        role: 'agent',
        status: 'active'
      })
    }

    const showPermissionDialog = () => {
      // 选择第一个用户作为示例
      const firstUser = userStore.users.find(user => user.role === 'agent')
      if (firstUser) {
        selectedUserForPermission.value = firstUser
        permissionForm.permissions = [...firstUser.permissions]
        permissionDialog.value.visible = true
      } else {
        ElMessage.warning('没有可编辑权限的用户')
      }
    }

    const confirmAddUser = async () => {
      try {
        addingUser.value = true
        const result = await userStore.createUser(addUserForm)
        
        if (result.success) {
          ElMessage.success('用户创建成功！')
          addUserDialog.value.visible = false
          
          // 刷新用户列表
          await userStore.fetchUsers()
        } else {
          ElMessage.error('创建用户失败：' + result.message)
        }
      } catch (error) {
        ElMessage.error('创建用户失败：' + error.message)
      } finally {
        addingUser.value = false
      }
    }

    const confirmUpdatePermissions = async () => {
      if (!selectedUserForPermission.value) return
      
      try {
        updatingPermissions.value = true
        const result = await userStore.updateUserPermissions(
          selectedUserForPermission.value.id, 
          permissionForm.permissions
        )
        
        if (result.success) {
          ElMessage.success('权限更新成功！')
          permissionDialog.value.visible = false
          
          // 刷新用户列表
          await userStore.fetchUsers()
        } else {
          ElMessage.error('权限更新失败：' + result.message)
        }
      } catch (error) {
        ElMessage.error('权限更新失败：' + error.message)
      } finally {
        updatingPermissions.value = false
      }
    }

    const translateRole = (role) => {
      const roleMap = {
        admin: '管理员',
        agent: '客服',
        customer: '客户',
        manager: '经理'
      }
      return roleMap[role] || role
    }

    // 工具方法
    const getStatusType = (status) => {
      const types = {
        pending: 'warning',
        in_progress: 'primary',
        resolved: 'success'
      }
      return types[status] || 'info'
    }

    const getPriorityType = (priority) => {
      const types = {
        high: 'danger',
        medium: 'warning',
        low: 'info'
      }
      return types[priority] || 'info'
    }

    const translateStatus = (status) => ({
      pending: '待处理',
      in_progress: '处理中',
      resolved: '已解决'
    }[status] || status)

    const translatePriority = (priority) => ({
      high: '高',
      medium: '中',
      low: '低'
    }[priority] || priority)

    const formatDate = (ts) => {
      if (!ts) return '-'
      const d = new Date(ts)
      return `${d.getMonth()+1}/${d.getDate()} ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`
    }

    // 刷新活动数据
    const refreshActivities = async () => {
      // 模拟刷新活动数据
      await new Promise(resolve => setTimeout(resolve, 1000))
      
      // 更新活动列表
      // recentActivities.value = [
      //   {
      //     id: Date.now(),
      //     title: '工单 #' + (Math.floor(Math.random() * 1000) + 1000) + ' 已解决',
      //     time: '刚刚',
      //     type: 'success',
      //     icon: Check  // ✅ 使用组件对象而不是字符串
      //   },
      //   ...recentActivities.value.slice(0, 3)
      // ]
      
      ElMessage.success('活动数据已刷新')
    }

    // 实时数据订阅
    const setupRealtimeData = () => {
      // 订阅统计数据更新
      realtimeData.subscribe('stats', (data) => {
        console.log('📊 收到统计数据更新:', data)
        // 这里可以更新相关的响应式数据
      })
      
      // 订阅趋势数据更新
      realtimeData.subscribe('trends', (data) => {
        console.log('📊 收到趋势数据更新:', data)
      })
      
      // 订阅团队绩效数据更新
      realtimeData.subscribe('teamPerformance', (data) => {
        console.log('📊 收到团队绩效数据更新:', data)
      })
    }

    onMounted(async () => {
      try {
        await ticketsStore.fetchTickets()
      } catch (error) {
        console.error('Failed to fetch tickets:', error)
      }
      
      // 延迟请求用户数据，避免同时发起多个请求
      try {
        await new Promise(resolve => setTimeout(resolve, 500)) // 延迟500ms
        await userStore.fetchUsers()
        
        // 从userStore中获取agents，而不是单独调用API
        const allUsers = userStore.users || []
        agents.value = allUsers
          .filter(user => user.role === 'AGENT' || user.role === 'agent')
          .map(user => ({
            id: user.id,
            name: user.fullName || user.name || user.username
          }))
      } catch (error) {
        console.warn('Failed to fetch users:', error)
        // 如果获取失败，尝试直接调用API（作为降级方案）
        try {
          await new Promise(resolve => setTimeout(resolve, 1000)) // 再延迟1秒
          agents.value = await UserService.listAgents()
        } catch (fallbackError) {
          console.warn('Fallback: Failed to fetch agents:', fallbackError)
        }
      }
      
      // 设置实时数据服务
      try {
        await new Promise(resolve => setTimeout(resolve, 500)) // 延迟500ms
        await realtimeData.connect()
        setupRealtimeData()
      } catch (error) {
        console.warn('Failed to connect realtime data service:', error)
      }
    })

    onUnmounted(() => {
      // 断开实时数据连接
      realtimeData.disconnect()
    })

    return {
      stats,
      slaRate,
      chartPeriod,
      ticketsStore,
      authStore,
      PERMISSIONS,
      showTicketPanel,
      showUserPanel,
      showAnalyticsPanel,
      selectedTicket,
      ticketSearchKeyword,
      filteredTickets,
      agents,
      ticketSubmitDialog,
      statusDialog,
      assignDialog,
      addUserDialog,
      permissionDialog,
      ticketForm,
      statusForm,
      addUserForm,
      permissionForm,
      selectedUserForPermission,
      ticketRules,
      addUserRules,
      submitting,
      updating,
      assigning,
      addingUser,
      updatingPermissions,
      showTicketSubmit,
      showTicketList,
      showUserManagement,
      showAnalytics,
      closeTicketPanel,
      closeUserPanel,
      closeAnalyticsPanel,
      selectTicket,
      handleTicketSearch,
      submitTicket,
      updateTicketStatus,
      updateStatus,
      assignTicket,
      confirmAssign,
      getUserTicketCount,
      showAddUserDialog,
      showPermissionDialog,
      confirmAddUser,
      confirmUpdatePermissions,
      translateRole,
      getStatusType,
      getPriorityType,
      translateStatus,
      translatePriority,
      formatDate
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  display: flex;
  padding: 24px;
  background: #f5f7fa;
  min-height: calc(100vh - 80px);
}

.right-panel {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 8px 0;
  min-height: calc(100vh - 80px);
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #1a202c;
  font-size: 16px;
  padding: 4px 0;
}

/* 活动区域样式 */
.trend-analysis-section,
.team-performance-section {
  flex: 0 0 auto;
}

.recent-activity-section {
  flex: 0 0 auto;
}

.recent-activity-card {
  min-height: 320px;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 250px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.activity-item:hover {
  background: #f8f9fa;
}

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: white;
}

.activity-icon.success {
  background: #10b981;
}

.activity-icon.primary {
  background: #3b82f6;
}

.activity-icon.info {
  background: #06b6d4;
}

.activity-icon.warning {
  background: #f59e0b;
}

.activity-title {
  font-size: 14px;
  font-weight: 500;
  color: #1a202c;
  margin-bottom: 2px;
}

.activity-time {
  font-size: 12px;
  color: #718096;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dashboard-container {
    padding: 16px;
  }
  
  .right-panel {
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .dashboard-container {
    padding: 12px;
  }
  
  .right-panel {
    gap: 20px;
  }
}
</style>
